<template>
    <h1 style="text-align: center;margin-top: 90px;">请选择床位</h1>
    <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" >
        <el-form-item label="病区">
      <el-select style="width: 120px;" v-model="formInline.zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
     <el-form-item label="房间号">
      <el-select style="width: 120px;" v-model="formInline.room">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleQuery">查询</el-button>
    </el-form-item>
    </el-form>
       <table style="text-align: center; margin-top: 40px; margin: 0 auto;">
            <tr>
                <td><el-button style="width: 150px; height: 60px; margin-right: 40px;background-color:white;" @click="handleBedClick('01床', '美杜莎')">01床 美杜莎</el-button></td>
                <td><el-button style="width: 150px; height: 60px; margin-right: 40px;background-color:white;" @click="handleBedClick('02床', '萧薰儿')">02床 萧薰儿</el-button></td>
                <td><el-button style="width: 150px; height: 60px; margin-right: 40px;background-color:white;" @click="handleBedClick('03床', '云韵')">03床 云韵</el-button></td>
                <td><el-button style="width: 150px; height: 60px; margin-right: 40px;background-color:white;" @click="handleBedClick('04床', '贺尊求')">04床 贺尊求</el-button></td>
            </tr>
        </table>
        <table style="text-align: center; margin-top: 40px; margin: 0 auto;">
            <tr>
                <td><el-button style="width: 150px; height: 60px; margin-right: 40px;background-color:white;" @click="handleBedClick('05床', '贺尊求')">05床 贺尊求</el-button></td>
                <td><el-button style="width: 150px; height: 60px; margin-right: 40px;background-color:white;" @click="handleBedClick('06床', '贺尊求')">06床 贺尊求</el-button></td>
                <td><el-button style="width: 150px; height: 60px; margin-right: 40px;background-color:white;" @click="handleBedClick('07床', '贺尊求')">07床 贺尊求</el-button></td>
                <td><el-button style="width: 150px; height: 60px; margin-right: 40px;background-color:white;" @click="handleBedClick('08床', '贺尊求')">08床 贺尊求</el-button></td>
            </tr>
        </table>

        <BarcodeDialog ref="barcodeDialogRef" @confirm="handleBarcodeConfirm" @cancel="handleBarcodeCancel" draggable />

        <!-- Barcode Display Section -->
        <div v-if="showBarcodes" class="barcode-display">
            <el-card class="barcode-card">
                <div class="barcode-grid">
                    <div class="barcode-item">
                        <div class="code-label">患者条形码</div>
                        <div class="barcode-container">
                            <canvas ref="patientBarcode"></canvas>
                        </div>
                        <div class="qrcode-container">
                            <QrcodeVue :value="barcodeData.patientBarcode" :size="120" level="H" />
                        </div>
                    </div>
                    <div class="barcode-item">
                        <div class="code-label">患者二维码</div>
                        <div class="qrcode-container">
                            <QrcodeVue :value="barcodeData.patientSecondaryCode" :size="120" level="H" />
                        </div>
                    </div>
                    <div class="barcode-item">
                        <div class="code-label">小便二维码</div>
                        <div class="qrcode-container">
                            <QrcodeVue :value="barcodeData.urineSecondaryCode" :size="120" level="H" />
                        </div>
                    </div>
                    <div class="barcode-item">
                        <div class="code-label">大便二维码</div>
                        <div class="qrcode-container">
                            <QrcodeVue :value="barcodeData.stoolSecondaryCode" :size="120" level="H" />
                        </div>
                    </div>
                </div>
                <div class="print-actions">
                    <el-button type="primary" @click="handlePrint">打印</el-button>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import BarcodeDialog from '@/components/BarcodeDialog.vue'
import QrcodeVue from 'qrcode.vue'
import JsBarcode from 'jsbarcode'

const formInline = reactive({
  zone: '',
  room: ''
})

const barcodeDialogRef = ref()
const currentBed = ref({
  bedNumber: '',
  patientName: ''
})

const showBarcodes = ref(false)
const barcodeData = ref({
  patientBarcode: '',
  patientSecondaryCode: '',
  urineSecondaryCode: '',
  stoolSecondaryCode: ''
})

const patientBarcode = ref<HTMLCanvasElement | null>(null)

const handleQuery = () => {
  console.log('Query with:', formInline)
}

const handleBedClick = (bedNumber: string, patientName: string) => {
  currentBed.value = {
    bedNumber,
    patientName
  }
  showBarcodes.value = false
  barcodeDialogRef.value.open(currentBed.value)
}

const handleBarcodeConfirm = (formData: any) => {
  barcodeData.value = { ...formData }
  showBarcodes.value = true
  
  // Generate barcode in next tick to ensure DOM is updated
  setTimeout(() => {
    if (patientBarcode.value) {
      JsBarcode(patientBarcode.value, formData.patientBarcode, {
        format: "CODE128",
        width: 2,
        height: 80,
        displayValue: true,
        fontSize: 14,
        textAlign: "center",
        textPosition: "bottom",
        textMargin: 6,
        font: "monospace",
        margin: 10
      })
    }
  }, 0)
}

const handleBarcodeCancel = () => {
  console.log('Barcode dialog cancelled')
}

const handlePrint = () => {
  window.print()
}
</script>

<style scoped>
.demo-form-inline {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.barcode-display {
  margin-top: 20px;
  padding: 20px;
  display: flex;
  justify-content: center;
}

.barcode-card {
  width: 800px;
  background-color: #fff;
  padding: 20px;
}

.barcode-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  padding: 20px;
}

.barcode-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.code-label {
  font-size: 16px;
  color: #333;
  font-weight: 500;
  margin-bottom: 10px;
}

.barcode-container {
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.qrcode-container {
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.print-actions {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

@media print {
  .demo-form-inline,
  .el-button:not(.print-button) {
    display: none !important;
  }
  
  .barcode-display {
    margin: 0;
    padding: 0;
  }

  .barcode-card {
    box-shadow: none !important;
    width: 100% !important;
  }
}
</style>